<div class="virtual-code-viewer-container">
  <!-- 头部信息栏 -->
  <div class="header-bar">
    <div class="file-info">
      <h2 class="file-title">虚拟滚动代码查看器</h2>
      <span class="file-details" *ngIf="codeData">{{ getFileInfo() }}</span>
      <span class="feature-badge virtual-scroll" [class.enabled]="enableVirtualScroll">
        <span *ngIf="enableVirtualScroll">🚀 虚拟滚动已启用</span>
        <span *ngIf="!enableVirtualScroll">📄 传统渲染模式</span>
      </span>
      <span class="syntax-support" *ngIf="codeData && isSyntaxHighlightSupported()">
        ✨ 语法高亮支持 ({{ getCurrentLanguage() }})
      </span>
    </div>
    <div class="actions">
      <button 
        class="btn btn-toggle" 
        [class.active]="enableVirtualScroll"
        (click)="toggleVirtualScroll()" 
        [disabled]="loading"
        title="切换虚拟滚动模式"
      >
        <span *ngIf="enableVirtualScroll">🚀 虚拟滚动</span>
        <span *ngIf="!enableVirtualScroll">📄 传统模式</span>
      </button>
      <a 
        class="btn btn-link" 
        routerLink="/"
        title="返回原版本"
      >
        ← 原版本
      </a>
      <button class="btn btn-secondary" (click)="reloadData()" [disabled]="loading">
        <span *ngIf="loading">加载中...</span>
        <span *ngIf="!loading">重新加载</span>
      </button>
    </div>
  </div>

  <!-- 性能信息栏 -->
  <div class="performance-bar" *ngIf="!loading && !error && codeData">
    <div class="performance-info">
      <span class="performance-text">{{ getPerformanceInfo() }}</span>
      <span class="threshold-info" *ngIf="displayLines.length <= virtualScrollThreshold">
        (小于 {{ virtualScrollThreshold }} 行，建议使用传统模式)
      </span>
      <span class="threshold-info" *ngIf="displayLines.length > virtualScrollThreshold">
        (超过 {{ virtualScrollThreshold }} 行，建议使用虚拟滚动)
      </span>
    </div>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="loading" class="loading-container">
    <div class="loading-spinner"></div>
    <p>正在加载代码内容...</p>
  </div>

  <!-- 错误状态 -->
  <div *ngIf="error && !loading" class="error-container">
    <div class="error-icon">⚠️</div>
    <p class="error-message">{{ error }}</p>
    <button class="btn" (click)="reloadData()">重试</button>
  </div>

  <!-- 主内容区域 -->
  <div *ngIf="!loading && !error && codeData" class="main-content">
    <!-- 侧边栏信息面板 -->
    <div class="side-panel">
      <!-- 区域信息 -->
      <div class="regions-panel">
        <h3>显示区域</h3>
        <div class="regions-list">
          <div 
            *ngFor="let region of getVisibleRegions(); let i = index" 
            class="region-item"
            (click)="scrollToLine(region.startLine)"
          >
            <div class="region-info">
              <span class="region-name">区域 {{ i + 1 }}</span>
              <span class="region-lines">第 {{ region.startLine }} - {{ region.endLine }} 行</span>
            </div>
            <div class="region-status">
              <span 
                class="status-badge"
                [style.background-color]="region.backgroundColor"
                [style.color]="region.backgroundColor ? '#333' : '#155724'"
              >
                已显示
              </span>
            </div>
            <div class="region-actions">
              <button 
                class="btn-small" 
                (click)="scrollToLine(region.startLine); $event.stopPropagation()"
                title="跳转到区域"
              >
                🎯
              </button>
            </div>
          </div>
        </div>
        
        <!-- 快速操作 -->
        <div class="quick-actions">
          <h4>快速操作</h4>
          <button class="btn-action" (click)="expandAll()">展开所有隐藏行</button>
          <button class="btn-action" (click)="collapseAll()">重置显示</button>
        </div>

        <!-- 虚拟滚动控制 -->
        <div class="virtual-scroll-controls" *ngIf="displayLines.length > virtualScrollThreshold">
          <h4>虚拟滚动控制</h4>
          <div class="control-item">
            <label class="switch">
              <input 
                type="checkbox" 
                [checked]="enableVirtualScroll"
                (change)="toggleVirtualScroll()"
              >
              <span class="slider"></span>
            </label>
            <span class="control-label">启用虚拟滚动</span>
          </div>
          <div class="control-info" *ngIf="enableVirtualScroll && virtualState">
            <small>
              可见行: {{ virtualState.visibleStartIndex + 1 }} - {{ virtualState.visibleEndIndex + 1 }}<br>
              渲染行: {{ virtualState.renderStartIndex + 1 }} - {{ virtualState.renderEndIndex + 1 }}<br>
              总高度: {{ virtualState.totalHeight }}px
            </small>
          </div>
        </div>

        <!-- 语法高亮信息 -->
        <div class="syntax-info">
          <h4>语法高亮</h4>
          <div class="syntax-status">
            <span class="language-tag">{{ getCurrentLanguage().toUpperCase() }}</span>
            <span 
              class="support-status" 
              [class.supported]="isSyntaxHighlightSupported()"
              [class.not-supported]="!isSyntaxHighlightSupported()"
            >
              {{ isSyntaxHighlightSupported() ? '✓ 已启用' : '✗ 不支持' }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 代码显示容器 -->
    <div class="code-container">
      <div class="code-header">
        <span class="code-title">{{ codeData.fileContent.filename }}</span>
        <span class="code-language">{{ codeData.fileContent.language }}</span>
        <div class="render-mode-indicator">
          <span class="mode-label">渲染模式:</span>
          <span class="mode-name" [class.virtual]="enableVirtualScroll" [class.traditional]="!enableVirtualScroll">
            {{ enableVirtualScroll ? '虚拟滚动' : '传统渲染' }}
          </span>
        </div>
      </div>

      <!-- 虚拟滚动容器 -->
      <div 
        #scrollContainer
        class="scroll-container"
        [class.virtual-mode]="enableVirtualScroll"
      >
        <!-- 虚拟滚动内容区域 -->
        <div 
          #contentContainer
          class="content-container"
          [ngStyle]="getContainerStyle()"
        >
          <!-- 实际渲染的内容 -->
          <div 
            class="rendered-content"
            [ngStyle]="getContentStyle()"
          >
            <!-- 代码行容器 -->
            <div 
              class="line-container" 
              *ngFor="let line of getDisplayLines(); let i = index; trackBy: trackByLine"
              [attr.data-line]="line.lineNumber"
              [attr.data-virtual-index]="line.virtualIndex"
            >
              <!-- 普通代码行 -->
              <div 
                *ngIf="!line.isCollapsedPlaceholder" 
                class="code-line"
                [class.original-visible]="line.lineType === 'original_visible'"
                [class.manually-expanded]="line.lineType === 'manually_expanded'"
                [class.virtual-visible]="enableVirtualScroll && line.isVisible"
                [style.background-color]="line.backgroundColor || 'transparent'"
              >
                <span class="line-number">{{ line.lineNumber }}</span>
                <code 
                  class="line-content" 
                  [innerHTML]="line.highlightedContent ? getSafeHtml(line.highlightedContent) : line.content"
                ></code>
              </div>
              
              <!-- 折叠占位符行 -->
              <div *ngIf="line.isCollapsedPlaceholder" class="collapsed-line">
                <!-- 行号区域带展开按钮 -->
                <div class="line-number-expand-area">
                  <!-- 起始行号 -->
                  <div class="line-number-item start-line">{{ line.hiddenLineStart }}</div>
                  
                  <!-- 向下展开5行图标 -->
                  <div 
                    class="line-number-item expand-icon expand-down-icon" 
                    (click)="expandDownward(line.hiddenLineStart!, line.hiddenLineEnd!, line.virtualIndex)"
                    title="向下展开5行"
                  >▼</div>
                  
                  <!-- 展开全部按钮 -->
                  <div 
                    class="line-number-item expand-icon expand-all-icon" 
                    (click)="expandHiddenRegion(line.hiddenLineStart!, line.hiddenLineEnd!, line.virtualIndex)"
                    title="展开这 {{ line.hiddenLineEnd! - line.hiddenLineStart! + 1 }} 行代码"
                  >●</div>
                  
                  <!-- 向上展开5行图标 -->
                  <div 
                    class="line-number-item expand-icon expand-up-icon" 
                    (click)="expandUpward(line.hiddenLineStart!, line.hiddenLineEnd!, line.virtualIndex)"
                    title="向上展开5行"
                  >▲</div>
                  
                  <!-- 结束行号 -->
                  <div class="line-number-item end-line">{{ line.hiddenLineEnd }}</div>
                </div>
                
                <!-- 折叠内容显示 -->
                <div class="collapsed-content">
                  <span class="collapsed-text">⋯ {{ line.hiddenLineEnd! - line.hiddenLineStart! + 1 }} 行被折叠 ⋯</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 使用说明 -->
  <div *ngIf="!loading && !error && codeData" class="help-panel">
    <details>
      <summary>虚拟滚动说明</summary>
      <div class="help-content">
        <div class="feature-comparison">
          <div class="feature-col">
            <h5>🚀 虚拟滚动模式</h5>
            <ul>
              <li><strong>高性能</strong>：只渲染可见区域的DOM节点</li>
              <li><strong>低内存</strong>：大幅减少内存占用</li>
              <li><strong>流畅滚动</strong>：万行级别文件流畅显示</li>
              <li><strong>智能缓冲</strong>：预渲染缓冲区防止白屏</li>
              <li><strong>动态行高</strong>：支持折叠行等不同高度</li>
            </ul>
          </div>
          <div class="feature-col">
            <h5>📄 传统渲染模式</h5>
            <ul>
              <li><strong>完整DOM</strong>：所有行都在DOM中</li>
              <li><strong>简单操作</strong>：便于调试和样式定制</li>
              <li><strong>小文件友好</strong>：少量行数时性能更好</li>
              <li><strong>兼容性好</strong>：无复杂计算逻辑</li>
            </ul>
          </div>
        </div>
        <div class="usage-tips">
          <h5>💡 使用建议</h5>
          <ul>
            <li>超过 {{ virtualScrollThreshold }} 行时建议启用虚拟滚动</li>
            <li>点击区域标签可快速跳转到对应代码区域</li>
            <li>虚拟滚动模式下保持所有交互功能（展开、折叠、高亮等）</li>
            <li>性能信息栏显示当前渲染状态和建议模式</li>
          </ul>
        </div>
      </div>
    </details>
  </div>
</div> 